1 files changed, 37 insertions, 16 deletions
diff --git a/src/app/groups/[groupId]/balances/page.tsx b/src/app/groups/[groupId]/balances/page.tsx
index 24818c9..33ba653 100644
--- a/src/app/groups/[groupId]/balances/page.tsx
+++ b/src/app/groups/[groupId]/balances/page.tsx
@@ -1,4 +1,5 @@
 import { BalancesList } from '@/app/groups/[groupId]/balances-list'
+import { ReimbursementList } from '@/app/groups/[groupId]/reimbursement-list'
 import {
   Card,
   CardContent,
@@ -7,7 +8,7 @@ import {
   CardTitle,
 } from '@/components/ui/card'
 import { getGroup, getGroupExpenses } from '@/lib/api'
-import { getBalances } from '@/lib/balances'
+import { getBalances, getSuggestedReimbursements } from '@/lib/balances'
 import { notFound } from 'next/navigation'
 
 export default async function GroupPage({
@@ -20,22 +21,42 @@ export default async function GroupPage({
 
   const expenses = await getGroupExpenses(groupId)
   const balances = getBalances(expenses)
+  const reimbursements = getSuggestedReimbursements(balances)
+  console.log(reimbursements)
 
   return (
-    <Card className="mb-4">
-      <CardHeader>
-        <CardTitle>Balances</CardTitle>
-        <CardDescription>
-          This is the amount that each participant paid or was paid for.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <BalancesList
-          balances={balances}
-          participants={group.participants}
-          currency={group.currency}
-        />
-      </CardContent>
-    </Card>
+    <>
+      <Card className="mb-4">
+        <CardHeader>
+          <CardTitle>Balances</CardTitle>
+          <CardDescription>
+            This is the amount that each participant paid or was paid for.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <BalancesList
+            balances={balances}
+            participants={group.participants}
+            currency={group.currency}
+          />
+        </CardContent>
+      </Card>
+      <Card className="mb-4">
+        <CardHeader>
+          <CardTitle>Suggested reimbursements</CardTitle>
+          <CardDescription>
+            Here are suggestions for optimized reimbursements between
+            participants.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="p-0">
+          <ReimbursementList
+            reimbursements={reimbursements}
+            participants={group.participants}
+            currency={group.currency}
+          />
+        </CardContent>
+      </Card>
+    </>
   )
 }